<template>
  <!-- 车辆 -->
  <div class="list">
    <div
      class="listBox center"
      @click="cardClickFn(item)"
      v-for="(item, index) in addressList"
      :key="index"
    >
      <div class="card" style="position: relative">
        <div class="cardTop title aliCenter">License Plate Number：{{ item.carNumber }}</div>
        <div class="cardContent">
          <el-row>
            <el-col :span="5">
              <div class="qualityImg">
                <img :src="item.carLogo" alt="" srcset="" />
              </div>
            </el-col>
            <el-col :span="19">
              <el-col :span="24" class="col size2">
                <div>Vehicle Type:{{ item.carType }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Chassis Number (VIN):{{ item.carVIN }}</div>
              </el-col>
            </el-col>
          </el-row>
          <div class="deleteButton">
            <div class="button center" @click.stop="deleteFn(item)" style="background: #ff1f1f">
              Delete
            </div>
          </div>
        </div>
        <!-- <div class="button Consigness">Consignees</div> -->
        <!-- <div class="button Rejection">Rejection</div> -->
      </div>
    </div>
    <div class="pageButton center" v-if="total > 0">
      <div>
        <el-icon @click="pageFn(-1)" class="ArrowLeftBold" size="50" color="#ffdd00"
          ><ArrowLeftBold
        /></el-icon>
      </div>
      <div>
        <el-icon @click="pageFn(1)" class="ArrowRightBold" size="50" color="#ffdd00"
          ><ArrowRightBold
        /></el-icon>
      </div>
    </div>
    <div class="listBotton center">
      <div class="botton" @click="addVehicleFn">Upload</div>
    </div>
  </div>
  <!-- 添加车辆 -->
  <el-dialog
    class="AddVehicleBox"
    v-model="dialogVisibleAddVehicleFn"
    :show-close="false"
    :before-close="handleClose"
  >
    <div class="AddVehiclenCard">
      <div class="AddVehiclenCardTop aliCenter">New vehicles Added</div>
      <div class="AddVehiclenCardContent">
        <div class="left">
          <div class="upBOx" @click="upImgFn" v-if="!upImg">
            <div class="upImg center">+</div>
            <input ref="inputFile" type="file" style="display: none" />
          </div>
          <div v-else class="imgBox">
            <img :src="upImg" alt="" />
            <div class="Mask center">
              <div @click="magnifyFn">
                <el-icon color="white"><Search /></el-icon>
              </div>
              <div @click="deleteImgFn">
                <el-icon color="red"><Delete /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="rigth">
          <el-form :model="form" label-width="auto">
            <el-form-item label="Vehicle Type:">
              <el-select v-model="formDataAdd.carType" placeholder="Select">
                <el-option
                  v-for="item in optionsCarType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="License Plate Number:">
              <div>
                <el-input class="inpute1" v-model="formDataAdd.carNumber" />
              </div>
            </el-form-item>
            <el-form-item>
              <div style="display: flex; justify-content: end; width: 100%">
                <div class="PictureRecognition center" @click="PictureRecognitionFn(0)">
                  Upload lmage
                </div>
              </div>
            </el-form-item>
            <el-form-item label="Chasis number:">
              <el-input class="inpute1" v-model="formDataAdd.carVIN" placeholder="" />
            </el-form-item>
            <el-form-item>
              <div style="display: flex; justify-content: end; width: 100%">
                <div class="PictureRecognition center" @click="PictureRecognitionFn(1)">
                  Upload lmage
                </div>
              </div>
            </el-form-item>
          </el-form>
          <div class="center">
            <div class="cofimButton center" @click="addFn">Confirm</div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
  <!-- 放大图片 -->
  <el-dialog
    class="el-dialog__body2"
    v-model="dialogVisibleMagnifyFn"
    :show-close="false"
    :before-close="handleClose"
  >
    <div class="bakImg">
      <img :src="upImg" alt="" srcset="" />
    </div>
  </el-dialog>
  <!-- 选择车辆 -->
  <el-dialog
    v-model="dialogVisible"
    :show-close="false"
    class="cardDialog"
    style="padding: 0; border-radius: 20px; overflow: hidden; background-color: black"
  >
    <selectCar @getStoreList="getStoreList"></selectCar>
  </el-dialog>
  <!-- 删除 -->
  <el-dialog class="exitBox" v-model="dialogVisibleExit" :before-close="handleClose">
    <div class="dialogBox">
      <div class="title center exitTop">Are you sure you want to delete it?</div>
      <div class="buttons center" style="width: 100%">
        <div class="button2 center cancel" @click="ButtonexitFn(0)">Cancel</div>
        <div class="button2 center exitButton" @click="ButtonexitFn(1)">Delete</div>
      </div>
    </div>
  </el-dialog>
  <input
    ref="inputFile2"
    :key="key2"
    type="file"
    style="display: none"
    @change="handleFileUpload"
  />
</template>

<script setup>
import selectCar from './selectCar.vue'
import { mycarlist, mycarlistadd, mycarlistdelete, carlistDetils } from '@/http/api/mycar.js'
import { uploadAvatar, recognitionimg } from '@/http/api/my.js'
import { Delete, Search } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
let dialogVisibleMagnifyFn = ref(false)
let dialogVisibleAddVehicleFn = ref(false)
let formData = reactive({})
let inputFile = ref(null)
let inputFile2 = ref(null)
let key1 = ref(0)
let key2 = ref(0)
let upImg = ref('')
const magnifyFn = () => {
  dialogVisibleMagnifyFn.value = true
}
const addVehicleFn = () => {
  dialogVisibleAddVehicleFn.value = true
}
let dialogVisible = ref(false)
const upImgFn = () => {
  dialogVisible.value = true
}
let optionsCarType = ref([])
const getStoreList = (data) => {
  formDataAdd.carLogo = data.logo
  formDataAdd.carBRandId = data.id
  upImg.value = data.logo
  console.log(data, 887878)
  optionsCarType.value = data.carName.split('/').map((item) => {
    return {
      label: item,
      value: item
    }
  })
  dialogVisible.value = false
}
const upImgFn2 = () => {
  let res = ''
  inputFile2.value.addEventListener('change', async function (event) {
    var files = event.target.files[0]
    const formData = new FormData()
    //files 文件信息
    formData.append("uploadFiles", files)
    //提交的其他字段
    // 发送ajax请求
    key2.value++
    const url = await uploadAvatar(formData)
    res = await recognitionimg({ url: url.image_url })
    let words = JSON.parse(res.res)
    let regex =
      /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/
    words.words_result.forEach((item, index) => {
      if (regex.test(item.words)) {
        formDataAdd.carNumber = item.words
        ElMessage.success('Identification successful')
      }
    })
  })
  // 将input添加到文档中
  // document.body.appendChild(input);
  inputFile2.value.click()
}
const upImgFn3 = () => {
  let res = ''
  inputFile2.value.addEventListener('change', async function (event) {
    var files = event.target.files[0]
    const formData = new FormData()
    //files 文件信息
    formData.append("uploadFiles", files)
    //提交的其他字段
    // 发送ajax请求
    key2.value++
    const url = await uploadAvatar(formData)
    res = await recognitionimg({ url: url.image_url })
    let words = JSON.parse(res.res)
    let carVIN = ''
    const vinRegex = /[A-Za-z]{2}[A-Za-z0-9]{15}/g
    words.words_result.forEach((item) => {
      if (item.words.match(vinRegex)) {
        carVIN = item.words.match(vinRegex)[0]
      }
    })


    if (carVIN.split('').length == 17) {
      formDataAdd.carVIN = carVIN
      ElMessage.success('Identification successful')
    } else {
      ElMessage.error('Identification failure')
    }

  })
  // 将input添加到文档中
  // document.body.appendChild(input);
  inputFile2.value.click()
}
let formDataAdd = reactive({})
const deleteImgFn = () => {
  upImg.value = ''
}
let addressList = ref([])
const getData = async () => {
  let id = JSON.parse(localStorage.getItem('userInfo')).id
  const res = await mycarlist({ id, ...pageData })
  addressList.value = res.res
  total.value = res.total
}
const addFn = async () => {
  formDataAdd.userId = JSON.parse(localStorage.getItem('userInfo')).id
  const res = await mycarlistadd(formDataAdd)
  ElMessage({
    message: res.message,
    type: 'success',
  })
  dialogVisibleAddVehicleFn.value = false
  upImg.value = ''
  const keys = Object.keys(formDataAdd)
  let obj = {}
  keys.forEach((item) => {
    obj[item] = ""
  })
  Object.assign(formDataAdd, obj)
  getData()
}
let dialogVisibleExit = ref(false)
// 删除
const deleteFn = async (data) => {
  dialogVisibleExit.value = true
  deleteId.value = data.id
  // const res = await mycarlistdelete({ id: data.id })
  // ElMessage({
  //   message: res.message,
  //   type: 'success',
  // })
  // getData()
}
let deleteId = ref(0)
const ButtonexitFn = async (num) => {
  if (num == 1) {
    const res = await mycarlistdelete({ id: deleteId.value })
    ElMessage({
      message: res.message,
      type: 'success',
    })
    getData()
  }

  dialogVisibleExit.value = false
}
const cardClickFn = async (data) => {
  dialogVisibleAddVehicleFn.value = true
  upImg.value = data.carLogo
  formDataAdd.carNumber = data.carNumber
  formDataAdd.carVIN = data.carVIN
  formDataAdd.carType = data.carType
  formDataAdd.id = data.id
  const res = await carlistDetils({ id: data.carBRandId })
  optionsCarType.value = res.res.carName.split('/').map((item) => {
    return {
      label: item,
      value: item
    }
  })
}
let pageData = reactive({
  page: 1,
  size: 10
})
let total = ref(0)
const pageFn = (data) => {
  if (data < 0) {
    if (pageData.page * pageData.size != 10) {
      pageData.page = pageData.page + data == 0 ? 1 : pageData.page + data
      getData()
    }
  } else {
    if (pageData.page * pageData.size <= total.value) {
      pageData.page = pageData.page * pageData.size < total.value ? pageData.page + data : pageData.page
      getData()
    }
  }

}
const PictureRecognitionFn = (num) => {
  if (num == 0) {
    upImgFn2()
  } else {
    upImgFn3()
  }
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.pageButton {
  width: 100%;
  margin-top: 20px;
  .storeListRow {
    height: 300px;
    margin-top: 10px;
  }
  .ArrowLeftBold {
    cursor: pointer;
  }
  .ArrowRightBold {
    cursor: pointer;
  }
  .ArrowLeftBold:active {
    color: black;
  }
  .ArrowRightBold:active {
    color: black;
  }
}

.list {
  min-height: 500px;
}
.button {
  width: 180px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  right: 50px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 22px;
  color: black;
  cursor: pointer;
}
.button:active {
  background: #ffdd00 !important;
}
.qualityImg {
  width: 200px;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
.listBox {
  width: 100%;
  margin-top: 45px;
  .card {
    width: 1800px;
    height: 360px;
    border-radius: 20px;
    overflow: hidden;
    background: #1a1c1d;
    .cardTop {
      height: 100px;
      width: 100%;
      background: #ffdd00;
      padding: 0 20px;
      font-weight: bold;
      color: black;
    }
    .cardContent {
      padding: 0 50px;
      font-size: 24px;
      color: white;
      margin-top: 20px;
    }
  }
}
.listBotton {
  width: 100%;
  .botton {
    width: 170px;
    height: 70px;
    background: #ffdd00;
    font-weight: bold;
    font-size: 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: black;
    margin-top: 20px;
  }
  .botton:active {
    background: black;
    color: white;
  }
}
.AddVehiclenCard {
  width: 1700px !important;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  background: #1a1c1d;
  .AddVehiclenCardTop {
    height: 100px;
    width: 100%;
    background: #ffdd00;
    font-size: 24px;
    padding: 0 20px;
    font-weight: bold;
    color: black;
  }
}
.AddVehiclenCardContent {
  display: flex;
  padding: 10px;
  .left {
    margin-right: 30px;
    margin-left: 50px;
  }
}
.upImg {
  background: #3c3c3c;
  width: 260px;
  height: 260px;
  border-radius: 20px;
  font-size: 50px;
  cursor: pointer;
}

.imgBox {
  width: 260px;
  height: 260px;
  border-radius: 20px;
  position: relative;
  left: 0;
  top: 0;
  img {
    width: 100%;
    height: 100%;
  }
  .Mask {
    background: black;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    font-size: 30px;
  }
  .Mask:hover {
    opacity: 0.6;
  }
  cursor: pointer;
}

.bakImg {
  width: 800px;
  height: 800px;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .el-dialog__body2 {
  width: 800px !important;
}
::v-deep .el-dialog {
  width: 1800px;
}
::v-deep .el-form-item__label {
  font-size: 30px;
  color: white;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ffdd00;
  border: #ffdd00;
}
::v-deep .el-radio__input .is-checked {
  color: white !important;
  font-size: 24px;
}
.col {
  width: 100%;
  height: 40px;
  margin-top: 40px;
}
::v-deep .el-radio__label {
  color: white !important;
  font-size: 24px;
}
::v-deep .el-input {
  height: 40px;
}
::v-deep .el-input__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
}
::v-deep .el-select__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
  height: 40px;
}
.inpute1 {
  width: 800px;
}
.inpute2 {
  width: 1300px;
}

.cofimButton {
  width: 220px;
  height: 70px;
  background: #ffdd00;
  border-radius: 20px;
  font-size: 30px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.cofimButton:active {
  background: black;
  color: white;
}
.PictureRecognition {
  width: 190px;
  height: 37px;
  background: #ffdd00;
  border-radius: 10px;
  font-size: 24px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.PictureRecognition:active {
  background: black;
  color: white;
}
::v-deep .el-dialog__body3 {
  padding: 0;
  width: 1800px !important;
  overflow: hidden;
}

.cardDialog {
  padding: 0 !important;
  width: 800px !important;
  overflow: hidden;
}
::v-deep .exitBox {
  padding: 0;
  overflow: hidden;
  border-radius: 30px;
}
.button2 {
  width: 200px;
  height: 50px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 18px;
  color: black;
  cursor: pointer;
}
.dialogBox {
  width: 100%;
  height: 200px;
  background: #15191a;
}
.dialogBox {
  position: relative;
  padding: 10px 0 0 0;
}
.buttons {
  height: 150px;
}
.cancel {
  background: #ffdd00;
  margin-right: 10px;
}
.cancel:active {
  background: black;
}
.exitButton {
  background: red;
}
.exitButton:active {
  background: black;
}
::v-deep .el-input__inner {
  color: white;
  font-size: 22px;
}
::v-deep .el-select__selected-item {
  color: white;
  font-size: 22px;
}
::v-deep .el-dialog__body {
  border-radius: 25px;
  overflow: hidden;
}
</style>